import { DigitalAlbumWrapper } from "@/styles/digital-album";
import Image from "next/image";
import React, { FC, memo, ReactElement } from "react";
import { IDigitalData } from "../type/homeType";

interface IProps {
  children?: ReactElement;
  digitalData?: IDigitalData;
}

const DigitalAlbum: FC<IProps> = (props: IProps) => {
  const { digitalData } = props;
  return (
    <DigitalAlbumWrapper>
      <div className="left">
        <div className="top">
          <Image
            width={30}
            height={30}
            src={digitalData?.digitalIcon as string}
            alt=""
          />
          <div className="text">{digitalData?.name}</div>
        </div>
        <div className="main">{digitalData?.desc}</div>
        <div className="footer">{digitalData?.buyNow}</div>
      </div>
      <div className="right">
        <Image
          width={100}
          height={170}
          src={digitalData?.picStr as string}
          alt=""
          className="picStr"
        />
        <Image
          width={80}
          height={80}
          src={digitalData?.picStr1 as string}
          alt=""
          className="picStr1"
        />
        <Image
          width={100}
          height={100}
          src={digitalData?.picStr2 as string}
          alt=""
          className="picStr2"
        />
      </div>
    </DigitalAlbumWrapper>
  );
};

export default memo(DigitalAlbum);
